<template>
   <div class="weather tc" v-if="weather.weather">
        <h3 class="title" :title="weather.area + '/' + weather.weather + '/' + weather.wind + weather.windsc">
            {{ weather.area }}<i class="sperate" v-if="weather.weather">·</i>{{ weather.weather }}/{{ weather.real }}℃/{{ weather.wind }}{{ weather.windsc }}
        </h3>
        <div class="body" v-if="weather.weather">
            <span class="air name">{{ weather.humidity }}</span>
            <i class="icon" :class="`icon-weather-${weather.icon}`"></i>
            <span class="name">{{ weather.lowest }}℃~{{ weather.highest }}℃</span>
        </div>
            <div
            class="list weatherSwiper"
            v-if="weathers.length"
            v-swiper:mySwipers="swiperOption"
            >
            <div class="swiper-wrapper">
                <div
                class="swiper-slide list-item tc"
                v-for="item in weathers"
                :key="item.week"
                >
                    <i class="icon" :class="`icon-weather-${item.icon}`"></i>
                    <p class="weather-text">{{ item.weather }}</p>
                    <p class="name">{{ item.lowest }}℃~{{ item.highest }}℃</p>
                    <p class="week">{{ item.week }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            swiperOption: {
                // 是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                // notNextTick: true,
                // 循环
                loop: true,
                // 设定初始化时slide的索引
                initialSlide: 1,
                // freeMode: true,
                // 自动播放
                // autoplay: {
                //     delay: 3000,
                //     stopOnLastSlide: false,
                //     disableOnInteraction: false
                // },
                autoplay: true,
                // paginationClickable: true,
                // autoplayDisableOnInteraction: false,
                // 滑动速度
                // speed: 1000,
                // 滑动方向
                direction: 'horizontal',
                // 小手掌抓取滑动
                grabCursor: true,
                // 分页器设置
                // pagination: '.swiper-pagination',
                slidesPerView: 3,
                slidesPerGroup: 3,
                centeredSlides: false,
                // spaceBetween: -60,
                observer: true, // 修改swiper自己或子元素时，自动初始化swiper
                observeParents: true // 修改swiper的父元素时，自动初始化swiper
            },
            timer: null
        }
    },
    mounted () {
        clearInterval(this.timer)
        this.timer = setInterval(async () => {
            let weatherRes = await this.$api.setting.weatherDaily({ })
            let Res = await this.$api.setting.weather({ })
            // console.log(weatherRes.data.daily, 'weatherRes111')
            if (weatherRes.data === null) return
            weatherRes.data.weather = { ...weatherRes.data.location, ...Res.data.now }
            weatherRes.data.daily.map(el => {
                for (const key in weatherRes.data.weather) {
                    el[key] = weatherRes.data.weather[key]
                    el.area = el.name
                    el.real = el.temperature
                    el.wind = el.wind_direction
                    el.windsc = el.wind_speed
                    el.weather = el.text_day
                    el.lowest = el.low
                    el.highest = el.high
                }
            })
            let list = weatherRes.data.daily
            weatherRes && weatherRes.data && this.$store.commit('setWeather', [list, {}])
        }, 30000)
    },
    computed: {
        weather () {
            // console.log(this.$store.state, 'state')
            let weather = this.$store.state.weather
            return weather
        },
        weathers () { // 一周的天气
            return this.$store.state.weathers
        },
        weatherIcons () { // 天气图标库
            return this.$store.state.weatherIcons
        }
    },
    beforeDestroy () {
        clearInterval(this.timer)
    }
}
</script>

<style lang="less" scoped>
    .weather {
        // border: 1px solid @c-e8;
        // border-radius: @border-radius;
        margin-bottom: 20px;
        background-color: @white;
        box-shadow: 0 0 10px @c-ccc;
        border-radius: @border-radius;
        overflow: hidden;
        color: @c-333;
        .title {
            font-size: 24px;
            line-height: 28px;
            padding: 10px 20px;
            font-weight: 400;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            background-color: @c-f8;
            border-bottom: 1px solid @c-e8;
        }
    }
    .weather {
        .name {
            font-size: 20px;
            line-height: 20px;
            vertical-align: middle;
        }
        .sperate {
            margin: 0 5px;
        }
        .address {
            margin-top: 20px;
            line-height: 20px;
        }
        .body {
            .name {
                margin:0 10px;
                line-height: 44px;
            }
        }
        .air {
            background: @primary;
            color:@white;
            border-radius: @border-radius;
            padding: 5px;
        }
        .icon {
            display: inline-block;
            vertical-align: middle;
        }
        .list {
            border-top: 1px solid @c-e8;
            margin-bottom: 10px;
            &-item {
                padding: 0 5px;
                &:last-child {
                    border-bottom: 0;
                }
            }
            .week,
            .name {
                font-size: 12px;
                line-height: 16px;
            }
            .week {
                margin-left: 0;
            }
            .icon::after {
                font-size: 24px;
            }
        }
    }
</style>
